{%extends 'dbmp_base.html' %}

{% load staticfiles %}
{% load ip_filters %}

<!-- 添加该页面自己需要的 css 模板 -->
{% block css %}
    <link href="{% static 'css/plugins/sweetalert/sweetalert.css' %}" rel="stylesheet">
    <link href="{% static 'css/plugins/bootstrapvalidator/bootstrapValidator.min.css' %}" rel="stylesheet">
{% endblock %}

{% block app_title %}MySQL实例编辑{% endblock %}

<!-- 其他元素模块 -->
{% block top_element %}
<div class="row">
    <div class="col-md-5">
        <div class="row fontawesome-icon-list">
            <!-- 添加返回首页按钮 -->
            <div class="fa-hover col-md-4">
                <a href="{{ request.environ.HTTP_REFERER }}">
                    <i class="fa fa-reply"></i>
                    返回
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="row fontawesome-icon-list">
            <!-- 添加返回MySQL实例列表按钮 -->
            <div class="fa-hover  col-md-4">
                <a href="{% url 'dbmp_mysql_instance_index' %}">
                    <i class="fa fa-home"></i>
                    实例列表
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="row fontawesome-icon-list">
            <!-- 添加MySQL实例按钮 -->
            <div class="fa-hover col-md-10">
                <a href="{% url 'dbmp_mysql_instance_add' %}">
                    <i class="fa fa-plus-square"></i>
                    添加实例
                </a>
            </div>
        </div>
    </div>
</div>

{% endblock %}

<!-- 显示该页面主要展示的内容 -->
{% block content %}
<!-- OS 信息 -->
<section id="os_section">
    <h2 class="page-header">操作系统信息</h2>
    {% if cmdb_os %}
    <div id="os_row" class="row">
        <div id="chostname" class="col-md-4">
            <strong>主机名：</strong> {{ cmdb_os.hostname }}
        </div>
        <div id="cip" class="col-md-4">
            <strong>IP地址：</strong> {{ cmdb_os.ip | f_num2ip }}
        </div>
        <div id="calias" class="col-md-4">
            <strong>别名：</strong> {{ cmdb_os.alias }}
        </div>
    </div>

    <h4>&nbsp;</h4>
    
    <div class="row">
        <div class="col-md-3">
            <a id="os_list"><i class="fa fa-object-ungroup"></i>
                替换OS
            </a>
        </div>
    </div>
    {% endif %}
<section>

<section id="mysql_instance">
    <h2 class="page-header">MySQL实例信息</h2>

    <form method="post" action="{% url 'dbmp_mysql_instance_edit' %}" class="form-horizontal m-t" id="default_form">
        {% csrf_token %}
        <input id="cos_id" name="os_id" type="hidden" value="{{ dbmp_mysql_instance.os_id }}" />
        <input id="dmysql_instance_id" name="mysql_instance_id" type="hidden"
               value="{{ dbmp_mysql_instance.mysql_instance_id }}" />
        <input id="dmysql_instance_info_id" name="mysql_instance_info_id" type="hidden"
               value="{{ dbmp_mysql_instance_info.mysql_instance_info_id }}" />
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                链接 IP：
            </label>
            <div class="col-sm-8">
                <input id="chost" name="host" type="text" class="form-control"
                       value="{{ dbmp_mysql_instance.host | f_num2ip }}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                端口：
            </label>
            <div class="col-sm-8">
                <input id="cport" name="port" type="number" class="form-control"
                       value="{{ dbmp_mysql_instance.port }}">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                用户名：
            </label>
            <div class="col-sm-8">
                <input id="cusername" name="username" 
                       type="text" class="form-control" maxlength="50"
                       value="{{ dbmp_mysql_instance.username }}">
                <span class="help-block m-b-none">
                     <i class="fa fa-info-circle text-success"></i> 
                     该用户应该具备基本的管理MySQL权限(启动，关闭 等等)
                </span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                密码：
            </label>
            <div class="col-sm-8">
                <input id="cpassword" name="password" 
                       type="text" class="form-control" maxlength="200"
                       value="{{ dbmp_mysql_instance.password }}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                备注：
            </label>
            <div class="col-sm-8">
                <textarea id="cremark" name="remark" type="text" class="form-control">{{ dbmp_mysql_instance.remark }}</textarea>
            </div>
        </div>

        <hr /> 
        
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                配置文件路径：
            </label>
            <div class="col-sm-8">
                <input id="dmy_cnf_path" name="my_cnf_path" 
                       type="text" class="form-control" maxlength="200"
                       value="{{ dbmp_mysql_instance_info.my_cnf_path }}">
                <span class="help-block m-b-none">
                    <i class="fa fa-info-circle text-success"></i> 
                    如：/etc/my.cnf，/etc/my_3306.cnf
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                MySQL软件目录：
            </label>
            <div class="col-sm-8">
                <input id="dbase_dir" name="base_dir" 
                       type="text" class="form-control" maxlength="200"
                       value="{{ dbmp_mysql_instance_info.base_dir }}">
                <span class="help-block m-b-none">
                    <i class="fa fa-info-circle text-success"></i>
                    如：/usr/local/mysql
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                启动命令：
            </label>
            <div class="col-sm-8">
                <input id="dstart_cmd" name="start_cmd" 
                       type="text" class="form-control" maxlength="200"
                       value="{{ dbmp_mysql_instance_info.start_cmd }}">
                <span class="help-block m-b-none">
                     <i class="fa fa-info-circle text-success"></i> 
                     如：/bin/bash /usr/local/mysql/bin/mysqld_safe --defaults-file=/etc/my_3306.cnf > /dev/null 2>&1 &
                </span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-3">
                <a href="{{ request.environ.HTTP_REFERER }}" 
                   type="button" class="btn btn-default">
                    <i class="fa fa-times"></i>
                    取消
                </a>
                <button id="test_mysql_alived" type="button" class="btn btn-success">
                    <i class="fa fa-link"></i>
                    链接测试
                </button>
                <button onclick="dbmp_mysql_instance_delete({{ dbmp_mysql_instance.mysql_instance_id }})"
                   type="button" class="btn btn-danger">
                    <i class="fa fa-trash"></i>
                    删除
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-save"></i>
                    保存
                </button>
            </div>
        </div>
    </form>
<section>
{% endblock %}

<!-- 添加该页面自己需要的 js 模板 -->
{% block js %}
    <script src="{% static 'js/content.min.js' %}"></script>
    <script src="{% static 'js/plugins/sweetalert/sweetalert.min.js' %}"></script>
    <script src="{% static 'js/plugins/bootstrapvalidator/bootstrapValidator.min.js' %}"></script>
    <script src="{% static 'js/plugins/bootstrapvalidator/language/zh_CN.js' %}"></script>
    <script src="{% static 'js/plugins/layer/layer.min.js' %}"></script>

    <script>
        // 使用 Django csrf 功能
        $.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});

        //删除 dbmp_mysql_instance
        function dbmp_mysql_instance_delete(mysql_instance_id) {
            $(".confirm").unbind("click");
            swal({
                title: "您确定要删除这条信息吗?",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                $.ajax({
                    url: "{% url 'dbmp_mysql_instance_ajax_delete' %}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        mysql_instance_id: mysql_instance_id
                    }
                }).done(function(data) { 
                    if(data == true) {
                        swal("删除成功!", "已成功删除数据！", "success");
                        $(".confirm").click(function(){
                            location.href="{% url 'dbmp_mysql_instance_index' %}"
                        });
                    } else {
                        swal("对不起!", "删除数据失败了!", "error");
                    }
                }).error(function(data) { 
                    swal("对不起!", "删除操作失败了(调用删除方法失败)!", "error");
                });
            });
        }

        $(document).ready(function(){

            // 测试MySQL连接是否正常
            $('#test_mysql_alived').on('click', function() {

                mysql_host = $('#chost').val();
                mysql_port = $('#cport').val();
                mysql_user = $('#cusername').val();
                mysql_password = $('#cpassword').val();
                mysql_base_dir = $('#dbase_dir').val();
                os_id = $('#cos_id').val();

                text = '<div class="row text-left">';
                text += '&nbsp;&nbsp;&nbsp;&nbsp;操作系统ID: <code class="text-primary">' + os_id + '</code>';
                text += '</div>';

                text += '<div class="row text-left">';
                text += '&nbsp;&nbsp;&nbsp;&nbsp;MySQL 连接: <code class="text-primary">' + mysql_host + '</code>';
                text += '</div>';

                text += '<div class="row text-left">';
                text += '&nbsp;&nbsp;&nbsp;&nbsp;MySQL 端口: <code class="text-primary">' + mysql_port + '</code>';
                text += '</div>';

                text += '<div class="row text-left">';
                text += '&nbsp;&nbsp;&nbsp;&nbsp;MySQL 用户: <code class="text-primary">' + mysql_user + '</code>';
                text += '</div>';

                text += '<div class="row text-left">';
                text += '&nbsp;&nbsp;&nbsp;&nbsp;MySQL 密码: <code class="text-primary">' + mysql_password + '</code>';
                text += '</div>';

                text += '<div class="row text-left">';
                text += '&nbsp;&nbsp;&nbsp;&nbsp;MySQL 软件路径: <code class="text-primary">' + mysql_base_dir + '</code>';
                text += '</div>';


                swal({
                    title: "连接信息如下",
                    text: text,
                    type: "warning",
                    html: true,
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "测试",
                    closeOnConfirm: false
                }, function () {
                    $.ajax({
                        url: "{% url 'dbmp_mysql_handler_ajax_mysql_is_alived' %}",
                        type: "POST",
                        dataType: "json",
                        data: {
                            mysql_host: mysql_host,
                            mysql_port: mysql_port,
                            mysql_user: mysql_user,
                            mysql_password: mysql_password,
                            mysql_base_dir: mysql_base_dir,
                            os_id: os_id
                        }
                    }).done(function(data) { 
                        if(data == true) {
                            swal("连接成功!", "该链接可以使用！", "success");
                        } else {
                            swal("连接失败!", "请确认，连接参数是否正确!", "error");
                        }
                    }).error(function(data) { 
                        swal("连接失败!", "估计服务器内部出现了错误!", "error");
                    });
                });
            });


            // 弹出OS信息 iframe
            $('#os_list').on('click', function(){
                layer.open({
                    type: 2,
                    title: 'iframe父子操作',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['800px' , '520px'],
                    content: '{% url 'dbmp_mysql_instance_iframe_os_list' %}'
                });
            });

            // 表单验证
            $('#default_form').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    host: {
                        validators: {
                            notEmpty: {
                                message: '链接IP不能为空'
                            },
                            ip: {
                                message: '链接IP格式有误'
                            }
                        }
                    },
                    port: {
                        validators: {
                            notEmpty: {
                                message: '端口不能为空'
                            },
                            integer: {
                                message: '端口必须数字'
                            },
                            between: {
                                min: 1025,
                                max: 65535,
                                message: '端口必须在1025到65535之间'
                            }
                        }
                    },
                    username: {
                        message: '用户名验证失败',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 1,
                                max: 50,
                                message: '用户名长度必须在1到50位之间'
                            }
                        }
                    },
                    password: {
                        message: '密码验证失败',
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 200,
                                message: '密码长度必须在6到200位之间'
                            }
                        }
                    },
                    remark: {
                        message: '备注验证失败',
                        validators: {
                            stringLength: {
                                max: 200,
                                message: '备注长度必须在0到200位之间'
                            }
                        }
                    },
                    my_cnf_path: {
                        message: '配置文件路径验证失败',
                        validators: {
                            notEmpty: {
                                message: '配置文件路径不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 200,
                                message: '密码长度必须在6到200位之间'
                            }
                        }
                    },
                    base_dir: {
                        message: 'MySQL软件所在目录验证失败',
                        validators: {
                            notEmpty: {
                                message: 'MySQL软件所在目录不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 200,
                                message: 'MySQL软件所在目录长度必须在6到200位之间'
                            }
                        }
                    },
                    start_cmd: {
                        message: 'MySQL实例启动命令验证失败',
                        validators: {
                            notEmpty: {
                                message: 'MySQL实例启动命令不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 200,
                                message: 'MySQL实例启动命令长度必须在6到200位之间'
                            }
                        }
                    }
                }
            });
        });
        
    </script>
{% endblock %}
